<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="./js/jquery-1.7.2.min.js"></script>
	<script src="./js/localStorage.js"></script>
</head>
<style>
</style>
<script>
$(document).ready(function () {


	changeFrameHeight();
	
	$("#printTest").click(function(){
		printTest();
	});
	
	$("#generate").click(function(){
		
		var options = {
			total:$("#total").val()
			,colNum:$("#colNum").val()
		}
		
		options.totalWeight = 0;
		options.item = [];
		$(".item:checked").each(function(i,n){
			
			var trParent = $(n).closest("tr");
			var weight = $(".weight" , trParent);
			options.totalWeight = options.totalWeight+ parseInt($(weight).val());
			
			options.item.push(
				{
					method:$(n).attr("id")
					,weight:options.totalWeight
					,value:$(weight).val()
				}
			);
			
		});
		
		console.log(options);
		sendTest(options);
		
	});
	
	loadOption();
});

var cookieName = "shu-cookie";
function saveOption(options){
	return window.localStorage.setItem(cookieName , JSON.stringify(options))
}

function loadOption(){
	var cookieValue = window.localStorage.getItem(cookieName);
	var options = JSON.parse(cookieValue);
	$("#total").val(options.total);
	$("#colNum").val(options.colNum);
	
	$.each(options.item , function(k , item){
		var checkBox = $("#"+item.method);
		if(checkBox.size()>0){
			$(checkBox).attr("checked",true);
			var trParent = $(checkBox).closest("tr");
			var weight = $(".weight" , trParent);
			$(weight).val(item.value);
		}
		
	});
	
}

function printTest(){
  var iframe = document.getElementById("testFrame");
  var data = {};
  data.type = "print";
  iframe.contentWindow. postMessage (data, '*');
}

function sendTest(testData){
  var iframe = document.getElementById("testFrame");
  var data = {};
  data.type = "test";
  data.testData = testData;
  //保存上一次的信息
  saveOption(testData);
  iframe.contentWindow. postMessage (data, '*');
}

function changeFrameHeight(){
        var ifm= document.getElementById("testFrame");
        ifm.height=document.documentElement.clientHeight-10;
    }
window.onresize=function(){ changeFrameHeight();}

</script>

<body border="0" style="margin:0px;border:0px;overflow-x:hidden;overflow-y:auto;" >
	<table border="0"  width="100%" height="100%">
	<tr>
		<td width="20%" style="vertical-align:top">
			<div>题目总数<input id="total" type="input" maxLength="3" size="3" value="48"></div>
			<div>布局列<input id="colNum" type="input" maxLength="3" size="3" value="4"></div>
			<table border="0"  width="100%">
				<tr >
					<th width="5%"></th>
					<th>题目</th>
					<th width="10%">权重</th>
				</tr>
				<tr >
					<td><input id="innerTwenty" class="item" type="checkbox" value="10"/></td>
					<td>20以内加减法</td>
					<td><input type="input" class="weight" maxLength="3" size="3" value="10"></td>
				</tr>
				<tr >
					<td><input id="innerFifty" class="item" type="checkbox" value="10"/></td>
					<td>50以内加减法</td>
					<td><input type="input" maxLength="3" class="weight" size="3" value="10"></td>
				</tr>
				<tr >
					<td><input id="innerHundred" class="item" type="checkbox" value="10"/></td>
					<td>100以内加减法</td>
					<td><input type="input" maxLength="3" class="weight" size="3" value="10"></td>
				</tr>
				<tr >
					<td><input id="one10Multi" class="item" type="checkbox" value="10"/></td>
					<td>单10乘法</td>
					<td><input type="input" maxLength="3" class="weight" size="3" value="10"></td>
				</tr>
				<tr >
					<td><input id="inner20Multi" class="item" type="checkbox" value="10"/></td>
					<td>20以内乘法</td>
					<td><input type="input" maxLength="3" class="weight" size="3" value="10"></td>
				</tr>
			</table>
			<div>
				<input type="button" id="generate" value="生成">
				<input type="button" id="printTest" value="打印">
			</div>
			
		</td>
		<td >
			<iframe src="./shup.html" id="testFrame" name="testFrame" width="100%" frameborder=1 >
		</td>
	</tr>
	</table>

</html>